import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import instance from "../../api/instance";
import styles from "./list.module.css";
import { InfiniteScroll } from "antd-mobile";
function Index() {
  const { start, end, date } = useSelector((state) => state.city);
  const [page, setpage] = useState(1);
  const [list, setlist] = useState([]);
  let xr = async () => {
    const res = await instance.post("/api/trip/train", {
      start,
      end,
      date,
      page,
    });
    console.log(res);
    const { data, code } = res.data;
    if (code === 200) {
      setlist([...list, ...data]);
      setpage((x) => x + 1);
    }
  };
  useEffect(() => {
    xr();
  }, []);
  const [hasMore, setHasMore] = useState(true);
  return (
    <div>
      {list.length > 0 &&
        list.map((item, index) => (
          <div key={index} className={styles.box}>
            <div className={styles.boc}>
              <span>{item.start}</span>
              <span>{item.end}</span>
              <span>{item.startTime}</span>
              <span>
                一等座：<b>有票</b>
              </span>
              <span>
                二等座：<b>有票</b>
              </span>
              <span>
                商务座：<b>有票</b>
              </span>
            </div>
          </div>
        ))}
      <InfiniteScroll loadMore={xr} hasMore={hasMore} />
    </div>
  );
}

export default Index;
